<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <!-- cdn引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--cdn引入ElementUI组件必须先引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- cdn引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .el-header, .el-footer {
        background-color: #409EFF;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
<body>
<div id="app">


    <el-container>
        <el-header>下单页面</el-header>
        <el-main>
            <!--下单部分-->
            <div align="center">
                <el-form style="display: inline-block;"
                         label-width="100px"
                         class="demo-dynamic">
                    <el-form-item label="产品名称" prop="productName">
                        <el-input v-model="createOrderParams.productName"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">创建订单</el-button>
                    </el-form-item>

                </el-form>
            </div>

            <!-- 确认支付 -->
            <el-dialog title="确认付款页面" :visible.sync="confirmPayForm">
                <el-form :model="confirmPayData">
                    <el-form-item label="商品名称" :label-width="formLabelWidth">
                        <el-input disabled v-model="confirmPayData.productName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="创建订单时间" :label-width="formLabelWidth">
                        <el-input disabled v-model="confirmPayData.createDate" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="订单过期时间" :label-width="formLabelWidth">
                        <el-input disabled v-model="confirmPayData.expireDate" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="orderList">取消支付</el-button>
                    <el-button type="primary" @click="confirmPay">确认支付</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>


</div>

<!--cdn引入ElementUI组件必须先引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- cdn引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
    function parseParams() {
        let url = location.href;
        let n1 = url.length;//地址的总长度
        let n2 = url.indexOf("?");//取得?号的位置
        let params = url.substr(n2 + 1, n1 - n2)//从?号后面的内容
        let param = params.split('&');
        let result = new Map();
        for (let string of param) {
            let str = string.split('=');
            if (isEmptyObject(str) || isEmptyObject(str[0])) {
                continue;
            }
            console.log('--------------str[0]-----' + str[0])
            console.log('--------------str[1]-----' + str[1])
            result.set(str[0], str[1])
        }
        return result;
    }

    function isEmptyObject(obj) {
        return obj === null || obj === undefined || obj === '';
    }
</script>
<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
        data() {
            return {
                createOrderParams: {
                    productName: ''
                },
                confirmPayForm: false,
                confirmPayData: {
                    productName: '',
                    createDate: '',
                    expireDate: '',
                },
                formLabelWidth: '120px'
            };
        },
        methods: {
            submitForm() {
                if (isEmptyObject(vm.createOrderParams.productName)) {
                    alert('必要数据为空!');
                    return
                }
                vm.createOrder();
            },
            //创建订单
            createOrder() {
                let productName = vm.createOrderParams.productName;
                $.ajax({
                    url: '/createOrder/' + productName,
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        console.log('-----------------创建订单---------------------');
                        console.log(data);
                        console.log(data.success);
                        if (data.success) {
                            vm.confirmPayData.productName = data.productName;
                            vm.confirmPayData.createDate = data.createDate;
                            vm.confirmPayData.expireDate = data.expireDate;
                            //下单成功 确认支付
                            vm.confirmPayForm = true;

                        }
                    },
                    error: function (msg) {
                        alert('下单失败:' + msg);
                    }
                });
            },
            //确认支付
            confirmPay() {
                vm.confirmPayForm = false;
                let productName = vm.createOrderParams.productName;
                $.ajax({
                    url: '/confirmPay/' + productName,
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        console.log('-----------------确认支付---------------------');
                        console.log(data);
                        console.log(data.success);
                        if (data.success) {
                            alert('支付结果: 支付成功！');
                        } else {
                            alert('支付结果: 支付失败，订单已超时！');
                            vm.orderList();
                        }

                    },
                    error: function (msg) {
                        alert('下单失败:' + msg);
                    }
                });
            },
            //调整到 订单列表
            orderList() {
                vm.confirmPayForm = false;
                //跳转到 订单列表
                window.location.href = "orderList.html"
            }


        }
    })
</script>


</body>

</html>
